@import "../../../styles/default.scss";
.chart-nav-box{
  display: flex;
  align-items: center;
  position: relative;
  .chart-nav-tab{
    flex: 1;
    .okay-tab{
      padding: size(8) 0;
      font-size: pxToRem(12);
      color: $text-tip;
    }
  }
  .chart-nav-more {
    padding: 0 pxToRem(12);
    position: relative;
    color: $text-tip;
    .chart-nav-more-box{
      position: absolute;
      bottom: size(-8);
      left: 0;
      text-align: center;
      border-radius: size(4);
      border: solid 1px $theme-border-color;
      box-shadow: 0 0 size(4) $theme-border-color;
      transform: translateY(100%);
      background: $theme-background;
      width: 100%;
      margin: auto;
      .chart-nav-more-item {
        padding: size(4) 0;
        position: relative;
        &:after {
          position: absolute;
          content: ' ';
          width: calc(100% - 8px);
          left: size(4);
          height: 1px;
          display: inline-block;
          transform: scaleY(0.2);
          background: $theme-border-color;
          bottom: 0;
        }
      }
      &:before {
        position: absolute;
        content: ' ';
        left: 0;
        right: 0;
        top: size(-15);
        border-top: solid size(8) transparent;
        border-left: solid size(8) transparent;
        border-right: solid size(8) transparent;
        border-bottom: solid size(8) $theme-background;
        display: inline-block;
        width: 0;
        height: 0;
        margin: auto;
      }
    }
    &:after {
      content: ' ';
      width: 0;
      height: 0;
      border-top: solid size(3) transparent;
      border-left: solid size(3) transparent;
      border-right: solid size(3) $text-tip;
      border-bottom: solid size(3) $text-tip;
      position: absolute;
      right: pxToRem(2);
      bottom: 0;
    }
  }
  .chart-nav-setting{
    padding: 0 pxToRem(12);
    position: relative;
    &:before {
      position: absolute;
      left: pxToRem(4);
      height: 100%;
      width: 1px;
      transform: scaleX(0.3);
      background: $text-tip;
      content: ' ';
    }
  }
  &:after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: ' ';
    width: 100%;
    height: 1px;
    transform: scaleY(0.3);
    display: inline-block;
    background: $text-tip;
  }
}


.chart-body-box{
  display: flex;
  .chart-body-chart{
    flex: 1;
    .mini-chart{
      width: 100%;
      height: 240px;
    }
    .volume-chart {
      width: 100%;
      height: 60px;
    }
  }
  .chart-body-info{
    flex: 0 0 pxToRem(100);
    .chart-info-tab{
      display: flex;
      align-items: center;
      position: relative;
      .chart-info-tab-item {
        flex: 0 0 33.33%;
        text-align: center;
        padding: size(4) 0;
        position: relative;
        &.active {
          color: $active-color;
        }
      }
      &:after {
        position:  absolute;
        content: ' ';
        width: 100%;
        height: 1px;
        display: inline-block;
        background: $theme-bottom-line;
        transform: scaleY(0.2);
        left: 0;
        bottom: 0;
      }
    }
  }
}
